<template>
    <div class="addPet">
        <el-form :model="formInline" label-position="top" size="large">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="宠物名字">
                        <el-input v-model="formInline.name" placeholder="宠物名字" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input v-model="formInline.age" type="number" placeholder="年龄" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="性格">
                        <el-input v-model="formInline.personality" placeholder="性格" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="品种">
                        <el-input v-model="formInline.variety" placeholder="品种" clearable />
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="健康情况">
                        <el-input v-model="formInline.health" placeholder="健康情况" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="领养地址">
                        <el-input v-model="formInline.address" placeholder="领养地址" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系">
                        <el-input v-model="formInline.contact" type="tel" placeholder="联系" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="领养/送养">
                        <el-radio-group v-model="formInline.resource">
                            <el-radio value="领养">领养</el-radio>
                            <!-- <el-radio value="送养">送养</el-radio> -->
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="详情描述">
                        <el-radio-group v-model="formInline.detail">
                            <el-input v-model="formInline.detail" type="textarea" placeholder="详情描述" clearable />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-upload name="file" :multiple="true" :limit="6" v-model:file-list="fileList"
                    action="http://localhost:3000/api/upload-cover" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{ filterPet ? '修改' : '添加' }}</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>

<script lang="ts" setup>
import { ref, useTemplateRef, defineEmits, defineProps } from 'vue'
import { addPet, updatePet } from '@/utils/jia-axios'
import { ElNotification } from 'element-plus'

const { filterPet } = defineProps(['filterPet'])
import { useCounterStore } from '@/stores/counter'
const stores = useCounterStore();
const { token } = stores;


const emit = defineEmits(['handleDraewr'])
// 表单数据
// 名称、品种、年龄、性格、健康情况、领养地址、发布时间、联系
// name,Variety, age, personality, health, address, time, contact
const formInline = ref(filterPet || {
    name: '',
    variety: '',
    age: '',
    personality: '',
    health: '',
    address: '',
    contact: '',
    resource: '',
    detail: ''
})

// 上传图片
let fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}


// 提交数据，添加宠物领养信息
const onSubmit = async () => {
    const files = fileList.value.map(item => item.name)
    // console.log("files", files)
    const time = new Date().toLocaleString()
    const { name, variety, age, personality, health, address, contact, resource, detail } = formInline.value
    if (!filterPet) {
        let formData = {
            name,
            variety,
            age,
            personality,
            health,
            address,
            time,
            contact,
            resource,
            token,
            files,
            detail
        };
        // console.log(formData);
        await addPet(formData).then(res => {
            ElNotification({
                title: '添加成功',
                message: `成功添加 1 条数据`,
                type: 'success',
            })
        })
        // addPet(formData ).then()
        console.log('addPet submit!', formInline.value)
        formInline.value = {
            name: '',
            variety: '',
            age: '',
            personality: '',
            health: '',
            address: '',
            contact: '',
            resource: '',
            detail: ''
        }
    } else {        
        let formData = {
            id: filterPet._id,
            name,
            variety,
            age,
            personality,
            health,
            address,
            time,
            contact,
            resource,
            token,
            files,
            detail
        };
        await updatePet(formData).then(res => {
            ElNotification({
                title: '修改成功',
                message: `成功修改 1 条数据`,
                type: 'success',
            })
        })
        console.log('updatePet submit!', formInline.value)
    }
    emit('handleDraewr')
}
</script>


<style lang="less" scoped>
.addPet {
    box-shadow: 0 0 0 0 #000;
    border-radius: 20rem;
    background-color: #fff;
    padding: 0;

    .upload {
        img {
            width: 100%;
            height: auto;
        }
    }
}

.demo-form-inline .el-input {
    --el-input-width: 220rem;
}

.demo-form-inline .el-select {
    --el-select-width: 220rem;
}

// .el-button, .el-button.is-round{
//     margin: auto;
//     // padding: 0 26rem;
// }
.el-radio-group {
    width: 100%;
}
</style>